SVG #2 viewBox

1 viewBox is used to set the showing part of the SVG canvas

Notice the camel back the B of box is capitalized.

2 viewBox attribute takes four numbers

<svg viewBox="0 0 100 100"></svg>

The first number is x coordinate of upper left corner.

The second number is y coordinate of upper left corner.

The third number is width of view box.

The fourth number is height of view box.

3 viewBox can accept negative numbers

<svg viewBox="-100 -100 200 200"></svg>

Now the upper left corner is (-100 -100).

The SVG canvas is from (-100 -100) to (+100 +100).

Because width and height are 200.

>> Next lesson >>